import React, { Component, PropTypes } from 'react';
import { findDOMNode } from 'react-dom';
import { getPreview } from '../../api/getPreview';
import { connect } from 'react-redux';
import store from '../../store';

class FolderChild extends Component{

    showMenu(e){
        var folderName = $(findDOMNode(this)).find('.folder-child').html();
        store.dispatch({
            type: 'ACTIVE_FOLDER',
            activeFolder: folderName
        })

        e.preventDefault();
        e.stopPropagation();
        var container = document.getElementById('folder');
        console.log(container)
        var menu = $('#folder-operation')
        $('#rename-folder').show();
        $('#delete-folder').show();
        var evt = e || window.event;
        var rightedge = e.clientX - container.offsetLeft;
        var bottomedge = document.body.clientHeight -e.clientY;

        if(rightedge < menu.width()){
            menu.css('left', e.clientX + 'px')
        }else{
            menu.css('left', e.clientX - menu.width() + 'px')
        }

        if(bottomedge < menu.height()){
            menu.css('top', e.clientY - menu.height() + 'px')
        }else{
            menu.css('top', e.clientY + 'px')
        }

        $('#preview-operation').hide();
        $('#folder-operation').show();
        return false; 
    }

    selectSummary(e){
        var checkFolder = findDOMNode(this);
        $('#folder-list li').removeClass('active')
        $(checkFolder).addClass('active');
        getPreview($(checkFolder).find('.folder-child').html())
        $('.preview-child').removeClass('active');

        var folderName = $(findDOMNode(this)).find('.folder-child').html();
        store.dispatch({
            type: 'ACTIVE_FOLDER',
            activeFolder: folderName
        });

    }
    render(){
        return (
            <li className={ this.props.active} onClick={this.selectSummary.bind(this)}  onContextMenu = {this.showMenu.bind(this)} data-type={ this.props.id}>
                <i className="ic-svg ic-folder"></i>
                <span className="folder-child" ref="folderTitle">{ this.props.name }</span>
            </li>
        )
    }
}

export default connect(
)(FolderChild);